<template>
  <div class="my-orders-container">
    <el-card class="order-card">
      <template #header>
        <div class="card-header">
          <h2>我的订单</h2>
          <el-button type="primary" @click="$router.push('/createOrder')">创建新订单</el-button>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部订单" name="all"></el-tab-pane>
        <el-tab-pane label="待发货" name="pending"></el-tab-pane>
        <el-tab-pane label="运输中" name="shipping"></el-tab-pane>
        <el-tab-pane label="已签收" name="delivered"></el-tab-pane>
      </el-tabs>
      
      <div class="order-search">
        <el-input v-model="searchQuery" placeholder="搜索订单号或收件人" clearable>
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <div class="empty-placeholder" v-if="!hasData">
        <el-empty description="暂无订单数据"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const activeTab = ref('all')
const searchQuery = ref('')
const hasData = ref(false)

const handleTabClick = () => {
  // 实际应用中，这里会根据不同的标签加载不同状态的订单
  console.log('切换到标签:', activeTab.value)
}
</script>

<style scoped>
.my-orders-container {
  padding: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.order-search {
  margin: 20px 0;
  max-width: 400px;
}

.empty-placeholder {
  margin: 60px 0;
}
</style> 